﻿
<FluentStack>
    <FluentSwitch @bind-Value="@interactive" Label="Interactive" />
    <FluentSwitch @bind-Value="@interactiveExceptId" Label="Exception Zone (my-zone)" Disabled="@(!interactive)" />
    <FluentSwitch @bind-Value="@fullScreen" Label="Full screen" />
</FluentStack>

<FluentButton Appearance="Appearance.Accent"
              Style="margin: 24px 0px;"
              @onclick="() => visible = !visible">
    Show Overlay
</FluentButton>

<FluentStack VerticalAlignment="VerticalAlignment.Center">
    <FluentButton OnClick="@(e => counter++)">Increment</FluentButton>
    <FluentLabel>Counter: @counter</FluentLabel>
</FluentStack>

<FluentOverlay @bind-Visible=@visible
               Opacity="0.4"
               BackgroundColor="#e8f48c"
               FullScreen="@fullScreen"
               Interactive="@interactive"
               InteractiveExceptId="@(interactiveExceptId ? "my-zone" : null)"
               OnClose="HandleOnClose"
               PreventScroll=true>
    @if (interactive)
    {
        <div id="my-zone">
            <p>Non-interactive zone</p>
            <FluentProgressRing />
        </div>
    }
    else
    {
        <FluentProgressRing />
    }
</FluentOverlay>

<style>
    #my-zone {
        background-color: white;
        width: 200px;
        height: 160px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>

@code {
    bool visible = false;
    bool interactive = true;
    bool interactiveExceptId = true;
    bool fullScreen = true;
    int counter = 0;

    protected void HandleOnClose()
    {
        DemoLogger.WriteLine("Overlay closed");
    }
}
